
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue样式绑定</title>
    <script src="https://unpkg.com/vue@3.4.0"></script>
    <style>
        body { font-family: Arial, sans-serif; padding: 20px; }
        .demo-section { margin: 20px 0; padding: 15px; border: 1px solid #ddd; }
        .style-box { 
            width: 200px; 
            height: 100px; 
            margin: 10px; 
            display: inline-block;
            text-align: center;
            line-height: 100px;
            border: 2px solid #333;
        }
        .controls { margin: 10px 0; }
        .controls input, .controls select { margin: 5px; }
    </style>
</head>
<body>
    <div id="app">
        <h2>Vue样式绑定演示</h2>
        
        <!-- 对象语法样式绑定 -->
        <div class="demo-section">
            <h3>1. 样式对象语法</h3>
            <div 
                class="style-box"
                :style="{
                    backgroundColor: bgColor,
                    color: textColor,
                    fontSize: fontSize + 'px',
                    borderRadius: borderRadius + 'px',
                    transform: `rotate(${rotation}deg)`
                }">
                样式演示
            </div>
            
            <div class="controls">
                <label>背景色：<input type="color" v-model="bgColor"></label>
                <label>文字色：<input type="color" v-model="textColor"></label>
                <label>字体大小：<input type="range" min="12" max="24" v-model="fontSize"> {{fontSize}}px</label>
                <label>圆角：<input type="range" min="0" max="50" v-model="borderRadius"> {{borderRadius}}px</label>
                <label>旋转：<input type="range" min="0" max="360" v-model="rotation"> {{rotation}}°</label>
            </div>
        </div>
        
        <!-- 计算属性样式 -->
        <div class="demo-section">
            <h3>2. 计算属性样式</h3>
            <div class="style-box" :style="computedStyle">
                计算样式
            </div>
            
            <div class="controls">
                <label>主题：
                    <select v-model="theme">
                        <option value="light">明亮</option>
                        <option value="dark">暗黑</option>
                        <option value="colorful">彩色</option>
                    </select>
                </label>
                <label>大小：
                    <select v-model="size">
                        <option value="small">小</option>
                        <option value="medium">中</option>
                        <option value="large">大</option>
                    </select>
                </label>
            </div>
        </div>
        
        <!-- 数组语法样式 -->
        <div class="demo-section">
            <h3>3. 样式数组语法</h3>
            <div class="style-box" :style="[baseStyle, themeStyle, sizeStyle]">
                数组样式
            </div>
            
            <div class="controls">
                <button @click="randomizeStyles">随机样式</button>
                <button @click="resetStyles">重置样式</button>
            </div>
        </div>
        
        <!-- CSS变量绑定 -->
        <div class="demo-section">
            <h3>4. CSS变量绑定</h3>
            <div 
                class="style-box"
                :style="{
                    '--primary-color': primaryColor,
                    '--secondary-color': secondaryColor,
                    background: `linear-gradient(45deg, var(--primary-color), var(--secondary-color))`,
                    color: 'white',
                    textShadow: '1px 1px 2px rgba(0,0,0,0.5)'
                }">
                CSS变量
            </div>
            
            <div class="controls">
                <label>主色：<input type="color" v-model="primaryColor"></label>
                <label>辅色：<input type="color" v-model="secondaryColor"></label>
            </div>
        </div>
        
        <!-- 响应式样式 -->
        <div class="demo-section">
            <h3>5. 响应式样式</h3>
            <div 
                class="style-box"
                :style="responsiveStyle">
                响应式
            </div>
            
            <div class="controls">
                <label>屏幕宽度模拟：<input type="range" min="320" max="1200" v-model="screenWidth"> {{screenWidth}}px</label>
            </div>
        </div>
    </div>

    <script>
        const { createApp, ref, computed } = Vue;
        
        const App = {
            setup() {
                // 基础样式属性
                const bgColor = ref("#3498db");
                const textColor = ref("#ffffff");
                const fontSize = ref(16);
                const borderRadius = ref(10);
                const rotation = ref(0);
                
                // 主题和大小
                const theme = ref("light");
                const size = ref("medium");
                
                // CSS变量
                const primaryColor = ref("#e74c3c");
                const secondaryColor = ref("#f39c12");
                
                // 响应式
                const screenWidth = ref(800);
                
                // 数组样式
                const baseStyle = ref({
                    border: "2px solid #333",
                    transition: "all 0.3s ease"
                });
                
                const themeStyle = ref({
                    backgroundColor: "#ecf0f1",
                    color: "#2c3e50"
                });
                
                const sizeStyle = ref({
                    width: "200px",
                    height: "100px"
                });
                
                // 计算属性样式
                const computedStyle = computed(() => {
                    const themes = {
                        light: {
                            backgroundColor: "#ffffff",
                            color: "#333333",
                            border: "2px solid #ddd"
                        },
                        dark: {
                            backgroundColor: "#2c3e50",
                            color: "#ecf0f1",
                            border: "2px solid #34495e"
                        },
                        colorful: {
                            background: "linear-gradient(45deg, #ff6b6b, #4ecdc4, #45b7d1)",
                            color: "white",
                            border: "2px solid #fff"
                        }
                    };
                    
                    const sizes = {
                        small: { width: "150px", height: "75px", fontSize: "12px" },
                        medium: { width: "200px", height: "100px", fontSize: "16px" },
                        large: { width: "250px", height: "125px", fontSize: "20px" }
                    };
                    
                    return {
                        ...themes[theme.value],
                        ...sizes[size.value],
                        transition: "all 0.3s ease"
                    };
                });
                
                // 响应式样式
                const responsiveStyle = computed(() => {
                    const width = screenWidth.value;
                    
                    if (width < 480) {
                        return {
                            width: "150px",
                            height: "75px",
                            fontSize: "12px",
                            backgroundColor: "#e74c3c",
                            color: "white"
                        };
                    } else if (width < 768) {
                        return {
                            width: "200px",
                            height: "100px",
                            fontSize: "14px",
                            backgroundColor: "#f39c12",
                            color: "white"
                        };
                    } else {
                        return {
                            width: "250px",
                            height: "125px",
                            fontSize: "18px",
                            backgroundColor: "#27ae60",
                            color: "white"
                        };
                    }
                });
                
                // 方法
                const randomizeStyles = () => {
                    const colors = ["#e74c3c", "#3498db", "#2ecc71", "#f39c12", "#9b59b6"];
                    themeStyle.value = {
                        backgroundColor: colors[Math.floor(Math.random() * colors.length)],
                        color: "white",
                        transform: `rotate(${Math.random() * 360}deg)`
                    };
                };
                
                const resetStyles = () => {
                    themeStyle.value = {
                        backgroundColor: "#ecf0f1",
                        color: "#2c3e50",
                        transform: "rotate(0deg)"
                    };
                };
                
                return {
                    bgColor,
                    textColor,
                    fontSize,
                    borderRadius,
                    rotation,
                    theme,
                    size,
                    primaryColor,
                    secondaryColor,
                    screenWidth,
                    baseStyle,
                    themeStyle,
                    sizeStyle,
                    computedStyle,
                    responsiveStyle,
                    randomizeStyles,
                    resetStyles
                };
            }
        };
        
        createApp(App).mount("#app");
    </script>
</body>
</html>
